// pages/customization/customization.js
import request from "../../utils/request";
const app = getApp();
Page({
  /**
   * 页面的初始数据
   */
  data: {
    items: [],
    treeList: [],
    depth: 0,
    imageList: [
      {
        src:
          "https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/all.png",
        title: "全行业",
        id: 1,
      },
      {
        src:
          "https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/food.png",
        title: "餐饮类",
        id: 2,
      },
      {
        src:
          "https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/hotel.png",
        title: "酒店类",
        id: 3,
      },
      {
        src:
          "https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/official.png",
        title: "官网类",
        id: 4,
      },
    ],
    footerBoxList: [
      { title: "引流", text: "丰富营销活动,多种引流玩法", animation: null },
      {
        title: "转化",
        text:
          "秒杀、限时促销、组合套餐、N元M件、定金预售、新客有礼、短视频导购、直播等,引导商城消费",
        animation: null,
      },
      {
        title: "留存",
        text:
          "会员等级、会员卡、会员储值、会员积分、积分商城，构建完整会员体系，提高用户留存",
        animation: null,
      },
      {
        title: "复购",
        text:
          "礼品卡、支付有礼、积分商城、秒杀、限时促销、组合套餐、N元M件等营销活动,刺激用户复购",
        animation: null,
      },
      {
        title: "裂变",
        text: "拼团、砍价、推广员等社交玩法,引导会员转介绍",
        animation: null,
      },
      {
        title: "经营分析",
        text: "拼团、砍价、推广员等社交玩法,引导会员转介绍",
        animation: null,
      },
    ],
    zhongXinHuaAnimation: null,
    cxiaoChengXuAnimation: null,
    siYouHuaAnimation: null,
    sheJiaoHuaAnimation: null,
    secendBoxAnimation: null,
    animations: [],
    guanWnag: [],
    foodList: [],
    hotelList: [],
    allList: [],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    setTimeout(() => {
      this.zhongxinhua();
    }, 1500);
    setTimeout(() => {
      this.siyouhua();
    }, 2000);
    setTimeout(() => {
      this.shejiaohua();
    }, 2500);
    setTimeout(() => {
      this.secendboxtitle();
    }, 3000);
    setTimeout(() => {
      this.xiaochnegxu();
    }, 1000);
    setTimeout(() => {
      this.initAnimationsThird();
    }, 4000);
  },
  goback() {
    wx.navigateBack({
      delta: 1,
    });
  },
  async getList() {
    const res = await request({
      url:
        app.globalData.baseURL +
        "/app-api/package/question-table/getQuestionTreeNew",
    });
    this.setData({
      items: res.data,
    });
  },
  xiaochnegxu() {
    const animation = wx.createAnimation({
      duration: 1000,
      timingFunction: "ease",
    });
    animation.translateX("0rpx").opacity(1).step();
    this.setData({ cxiaoChengXuAnimation: animation.export() });
  },
  zhongxinhua() {
    const animation = wx.createAnimation({
      duration: 1000,
      timingFunction: "ease",
    });
    animation.translateX("240rpx").opacity(1).step();
    this.setData({ zhongXinHuaAnimation: animation.export() });
  },
  siyouhua() {
    const animation = wx.createAnimation({
      duration: 1000,
      timingFunction: "ease",
    });
    animation.translateX("-240rpx").opacity(1).step();
    this.setData({ siYouHuaAnimation: animation.export() });
  },
  shejiaohua() {
    const animation = wx.createAnimation({
      duration: 1000,
      timingFunction: "ease",
    });
    animation.translateX("270rpx").opacity(1).step();
    this.setData({ sheJiaoHuaAnimation: animation.export() });
  },
  secendboxtitle() {
    const animation = wx.createAnimation({
      duration: 1000,
      timingFunction: "ease",
    });
    animation.translateX("0rpx").opacity(1).step();
    this.setData({ secendBoxAnimation: animation.export() });
  },
  onAnimationThird(e) {
    // 当前动画结束，检查是否是最后一个动画
    const currentIndex = e.currentTarget.dataset.index;
    if (currentIndex === this.data.footerBoxList.length - 1) {
      // 如果是最后一个动画，则不需要做任何事，让它结束
      return;
    }
    // 如果不是最后一个动画，手动触发下一个动画
    this.triggerNextAnimation(currentIndex);
  },
  triggerNextAnimation(currentIndex) {
    // 看看现在的下标 + 1 是不是小于数组的长度的如果是的话那就不是最后一个
    if (currentIndex + 1 < this.data.titleImageList.length) {
      const nextAnimation = this.data.titleImageList[currentIndex + 1]
        .animation;
      if (nextAnimation) {
        this.setData({
          [`titleImageList[${currentIndex + 1}].animation`]: nextAnimation,
        });
      }
    }
  },
  initAnimationsThird() {
    const duration = 100; //持续时长
    const delayBetweenAnimations = 500; //每张图片动画的延迟，这里的延迟主要是在下面使用
    this.data.footerBoxList.forEach((image, index) => {
      const animation = wx.createAnimation({
        duration: duration,
        timingFunction: "ease-in-out",
      });
      // 为每张图片创建一个动画，注意这里设置的是动画间隔，不是步骤间隔
      animation
        // 如果要设置为只向上的话就只需要前面的一开始就向上，然后再回到原为即可
        .translateY(0) // 开始时向下移动
        .opacity(1) // 开始时透明度为0
        .step({ delay: index * delayBetweenAnimations }); // 设置延迟
      this.setData({
        [`footerBoxList[${index}].animation`]: animation.export(), // 导出动画
      });
    });
  },
  goCustomizationPage(event) {
    console.log(event);
    if (event.currentTarget.dataset.id === 1) {
      wx.navigateTo({
        url: `/pages/customizationAll/customizationAll?data=${this.data.allList}`,
      });
    } else if (event.currentTarget.dataset.id === 2) {
      wx.navigateTo({
        url: `/pages/customizationFood/customizationFood?data=${this.data.foodList}`,
      });
    } else if (event.currentTarget.dataset.id === 3) {
      wx.navigateTo({
        url: `/pages/customizationHotel/customizationHotel?data=${this.data.hotelList}`,
      });
    } else {
      wx.navigateTo({
        url: `/pages/customizationGuan/customizationGuan?data=${this.data.allList}`,
      });
    }
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {},
});
